<script setup lang="ts">
import { getDishesList } from '@/api/dishes';
import type { Dishes, DishesSearchForm } from '@/api/dishes/type';
import { typeById } from '@/api/ingredients';
import type { Ingredient } from '@/api/ingredients/types';
import type { FormInstance } from 'element-plus';
import { ref, watch } from 'vue';
import { addCart,getCartByToken } from '@/api/prepare';
import { useTokenStore } from '@/stores/useTokenStore';
const tokenStore = useTokenStore()
const token = tokenStore.getToken
// base_url
const base_url = import.meta.env.VITE_APP_BASE_API

/* =====dishes分页查询 + 属性 */
const total = ref(0)
const dishesList = ref<Dishes[]>([])
const queryDishesList = (pageNum = 1) => {
  getDishesList(searchForm.value)
    .then(pageInfo => {
      dishesList.value = pageInfo.rows
      total.value = pageInfo.total
    })
}

/* ====搜索框 */
const searchFormRef = ref<FormInstance>()
const searchForm = ref<DishesSearchForm>({
  pageSize: 4,
  pageNum: 1
})
/* 重置 */
const resetSearchForm = () => {
  searchFormRef.value?.resetFields()
  queryDishesList()
}
/* 侦听下拉选框的操作 
  深度侦听的问题
*/
watch(searchForm.value, () => {
  queryDishesList()
})

//三个下拉列表
const mainList = ref<Ingredient[]>([])
const minorList = ref<Ingredient[]>([])
const seansoningList = ref<Ingredient[]>([])
/* 三个列表的获取 */
const fetchAllIngredients = async () => {
  mainList.value = await typeById(1)
  minorList.value = await typeById(2)
  seansoningList.value = await typeById(3)
}


/* ==== 查询当前用户是否有预制记录 */
const savedRecord = ref<CartDTO[]>([])
const queryCartByToken = ()=>{
  getCartByToken(token)
  .then(resp=>{
    
  })
}
/* ==== created生命周期执行的函数 */
queryDishesList()
fetchAllIngredients()
queryCartByToken()
</script>

<template>
  <div class="app-container">
 
    <!-- 搜索框 -->
    <el-form style="height:20%" ref="searchFormRef" :model="searchForm" inline label-width="80">
      <!-- 1. 主要食材 -->
      <el-form-item style="width:180px" prop="main">
        <el-select clearable placeholder="请选择主要食材" v-model="searchForm.main">
          <el-option v-for="item in mainList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 2. 辅助食材 -->
      <el-form-item style="width:180px" prop="minor">
        <el-select clearable placeholder="请选择主要食材" v-model="searchForm.minor">
          <el-option v-for="item in minorList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 3. 调料 -->
      <el-form-item style="width:180px" prop="seansoning">
        <el-select clearable placeholder="请选择调料" v-model="searchForm.seansoning">
          <el-option v-for="item in seansoningList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain icon="Refresh" @click="resetSearchForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-scrollbar height="">
      <el-row :gutter="1">
        <el-col v-for="dishe in dishesList" :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <el-card>
            <div class="card-img">
              <el-image style="width:100%;height:200px" :src="base_url + dishe.url" />
            </div>
            <div class="card-content">
              <div class="content-top">
                <span style="font-size: large;">菜品名称:{{ dishe.name }}</span>
                <el-button text>加入预制订单</el-button>
              </div>
              <div class="content-bottom">
                <p class="font-style" style="font-size:small">主要食材:{{ dishe.mainName ? dishe.mainName : '无主要食材' }}</p>
                <p class="font-style" style="font-size:small">辅助食材:{{ dishe.minorName ? dishe.minorName : '无辅助食材' }}</p>
                <p class="font-style" style="font-size:small">配料食材:{{ dishe.seasoningName ? dishe.seasoningName :
                  '无配料食材' }}
                </p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
    <!-- pagination分页 -->
    <el-pagination style="height:30%" background :total="total" layout="total,sizes,pre,pager,next"
      v-model:page-size="searchForm.pageSize" v-model:current-page="searchForm.pageNum" :page-sizes="[4, 8, 12]"
      @current-change="queryDishesList" @size-change="queryDishesList()" />
  </div>
</template>

<style scoped>
.content-top {
  display: flex;
  justify-content: space-between
}

.font-style {
  margin: 3px
}
</style>